<template>
    <view>
        <poster
            v-if="posterConfig"
            id="poster"
            :hide-loading="true"
            :preload="false"
            :config="posterConfig"
            @success="bindPosterSuccessCmpt($event, { tagId: 'poster' })"
            @fail="bindPosterFailCmpt($event, { tagId: 'poster' })"
        ></poster>

        <view @touchmove.stop.prevent="trueFun" :class="'main-poster modal bottom-modal ' + (showClone ? 'show' : '')">
            <view class="dialog">
                <view class="bar add-bar">
                    <view class="action text-grey text-l"></view>
                    <view class="action plan-text text-l" @tap="bindCloseTap">关闭</view>
                </view>
                <view class="poster-img">
                    <image @tap="url" data-type="img" :data-url="imgClone" v-if="isLoad" mode="widthFix" :src="imgClone" class="shadow loading"></image>

                    <view v-else class="load loading text-l"></view>
                </view>
                <view class="poster-share">
                    <button class="item item-share clearbtn" open-type="share" :data-img="imgClone">
                        <view class="pic">
                            <image src="/static/cmpts/public/poster/images/wechat.png" />
                        </view>
                        <text>分享给朋友</text>
                    </button>

                    <view class="item" @tap="bindSaveTap">
                        <view class="pic">
                            <image class="friend" src="/static/cmpts/public/poster/images/friend.png" />
                        </view>
                        <text>保存后发朋友圈</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import poster from './wxa-plugin-canvas/poster';
/*
https://github.com/jasondu/wxa-plugin-canvas
### 标准尺寸：
width: 375, // rpx
height: 670,

### 父页面分享按钮取值
onShareAppMessage: function (e) {
	let img = e.target.dataset.img;
	return {
		title: 'xxx',
		imageUrl: img,
		path: 'xxxx',
	}
}
*/
import Poster from './wxa-plugin-canvas/poster/poster.js';
const pageHelper = require('../../../helper/page_helper.js');
const picHelper = require('../../../helper/pic_helper.js');
const helper = require('../../../helper/helper.js');
const PassportBiz = require('../../../biz/passport_biz.js');
const cloudHelper = require('../../../helper/cloud_helper.js');
export default {
    components: {
        poster
    },
    data() {
        return {
            isLoad: false,
            posterConfig: '',
            showClone: false,
            imgClone: ''
        };
    },
    externalClasses: ['poster-class'],
    options: {
        addGlobalClass: true,
        multipleSlots: true
    },
    /**
     * 组件的属性列表
     */
    props: {
        config: {
            // 图形参数
            type: Object,
            default: null
        },
        isQr: {
            // 是否叠加小程序码
            type: Boolean,
            default: false
        },
        isFace: {
            // 是否叠加头像
            type: Boolean,
            default: false
        },
        show: {
            // 显示
            type: Boolean,
            default: false
        },
        img: {
            //图片文件
            type: String,
            default: ''
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    destroyed: function () {
        // 在组件实例被从页面节点树移除时执行
    },
    /**
     * 组件的方法列表
     */
    methods: {
        ready: function () {
            this.initFun();
        },

        attached: function () {},

        initFun: async function () {
            this.setData(
                {
                    isLoad: false
                },
                async () => {
                    await this.createPoster();
                }
            );
        },

        bindCloseTap: function () {
            this.setData({
                showClone: false
            });
        },

        /**
         * 异步生成海报
         */
        createPoster: async function () {
            // TODO:根据屏幕大小来生成，但是没有负定位

            let posterConfig = {
                width: 375,
                // rpx
                height: 670,
                pixelRatio: 2,
                // 2 为原始大小
                backgroundColor: '#345678',
                debug: false
            };
            let config = this.config;
            if (!helper.isDefined(config['width'])) {
                config.width = posterConfig.width;
            }
            if (!helper.isDefined(config['height'])) {
                config.height = posterConfig.height;
            }
            if (!helper.isDefined(config['pixelRatio'])) {
                config.pixelRatio = posterConfig.pixelRatio;
            }
            if (!helper.isDefined(config['backgroundColor'])) {
                config.backgroundColor = posterConfig.backgroundColor;
            }
            if (!helper.isDefined(config['debug'])) {
                config.debug = posterConfig.debug;
            }

            //Object.assign(posterConfig, this.data.config); // TODO有问题

            this.setData(
                {
                    posterConfig: config
                },
                async () => {
                    await Poster.create(true, this);
                }
            );
        },

        onPosterFail: function (e) {
            console.log(e);
        },

        bindPosterSuccessCmpt(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let img = e.detail;
            this.setData({
                imgClone: img,
                isLoad: true
            });
        },

        url: function (e) {
            pageHelper.url(e, this);
        },

        bindPosterFailCmpt(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            console.log(e);
        },

        bindSaveTap: function (e) {
            let that = this;
            let callback = function () {
                uni.saveImageToPhotosAlbum({
                    filePath: that.img,
                    success: function (data) {
                        uni.showToast({
                            title: '保存成功',
                            icon: 'success',
                            duration: 1000
                        });
                    }
                });
            };
            picHelper.getWritePhotosAlbum(callback);
        },

        trueFun() {
            console.log('占位：函数 true 未声明');
        }
    },
    created: function () {},
    watch: {
        show: {
            handler: function (newVal, oldVal) {
                this.showClone = newVal;
            },

            immediate: true
        },

        img: {
            handler: function (newVal, oldVal) {
                this.imgClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './poster_cmpt.css';
</style>
